<template>
	<view class="my-container">
		<uni-popup ref="message" type="message" class="edit-message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="1000" border-radius="100px"
				class="edit-message"></uni-popup-message>
		</uni-popup>
		<view class="header">

			<image class="avatar" :src="avatarSrc"></image>
			<view class="user-info">
				<view class="username">
					<text class="header-medium-text">{{userInfo.userName}}</text>
				</view>
				<view class="location">
					<image src="/static/tabbar_new/icon-position.png" class="location-icon"></image>
					<text class="header-normal-text">武汉大学</text>
				</view>
				<view class="follower">
					<view class="header-normal-text" @click="goFollow(0)">关注 {{userInfo.followersCount}}</view>
					<view class="header-normal-text">|</view>
					<view class="header-normal-text" @click="goFollow(1)">粉丝 {{userInfo.fansCount}}</view>
				</view>
			</view>

			<view class="setting" @click="goConfig">
				<image class="gear-icon" src="/static/my/Icon-gear.png"></image>
				<text class="header-normal-text">设置</text>
			</view>

		</view>
		<!-- <view class="funtion-bar">
			<view class="message">
				<text class="header-normal-text">通知</text>
			</view>
			<view class="preference">
				<textclass="header-normal-text">偏好设置</text>
			</view>
			<view class="history">
				<textclass="header-normal-text">浏览历史aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</text>
			</view>
		</view> -->
		<view class="body">
			<scroll-view class="top-menu-view" scroll-x="true">
				<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)"
					@click="swichMenu(item.id - 1)">
					<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
						<text class="menu-topic-text">{{item.name}}<!-- {{item.count}} --></text>
						<view class="menu-topic-bottom">
							<view class="menu-topic-bottom-color"></view>
						</view>
					</view>
				</view>
			</scroll-view>

			<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
				<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id"
					:style="{ overflowY: swiperTopicListScroll }">
					<!-- <view class="swiper-item"> -->

					<view class="dish-list-filter" v-if="currentTab===0">
						<text class="filter-text" :style="{ fontWeight: currentFilter === 0 ? 'bold' : 'normal' }"
							@click="switchFilter(0)">最近</text>
						<text class="filter-text">|</text>
						<text class="filter-text" :style="{ fontWeight: currentFilter === 1 ? 'bold' : 'normal' }"
							@click="handleCollected()">收藏 {{collectedCount}}</text>
						<text class="filter-text">|</text>
						<text class="filter-text" :style="{ fontWeight: currentFilter === 2 ? 'bold' : 'normal' }"
							@click="handleCreated()">创建 {{createdDishLists.length}}</text>
					</view>

					<view class="dish-list-container" v-if="currentTab===0">

						<view class="dish-list" v-if="currentFilter===0">
							<view class="image-container" @click="goDishList(1, '我喜欢的菜品')">
								<image class="dish-list-image" :src="favoriteSrc" alt="/static/my/grey.png"></image>
								<image class="favorite-icon" src="/static/my/Icon-love.png"></image>
							</view>
							<view class="fav-dish-list-info" @click="goDishList(1, '我喜欢的菜品')">
								<text class="body-bold-text">我喜欢的菜品</text>
								<text class="body-normal-text">{{favDishCount}}道菜品</text>
							</view>
							<view class="go-to-blindbox-button" @click="goBlindBox()">最爱盲盒></view>
						</view>



						<view class="dish-list" v-for="(dish, index) in createdDishLists" :key="index"
							v-if="currentFilter===2 ">
							<view class="image-container" @click="goDishList(dish.dishListId, dish.name)">
								<image class="dish-list-image" :src="dish.imageSrc"></image>
							</view>
							<view class="dish-list-info" @click="goDishList(dish.dishListId, dish.name)">
								<text class="body-bold-text">{{dish.name}}</text>
								<text class="body-normal-text">{{dish.dishCount}}道菜品</text>
							</view>
							<view class="operation" @click="showDelete(index)">
								<image src="/static/home/main/details/more.png" class="more"></image>
							</view>


							<text class="delete" v-if="dish.toBeDeleted"
								@click="confirmDeleteDishList(dish.dishListId)">删除</text>
							<text class="cancel" v-if="dish.toBeDeleted" @click="cancelDelete(index)">取消</text>

						</view>

						<view class="dish-list" @click="openModal" v-if="currentFilter!=1">
							<view class="image-container">
								<image class="dish-list-image" src="/static/home/main/details/new-menu.png"></image>
							</view>
							<view class="dish-list-info">
								<text class="body-bold-text">创建新菜单</text>
								<!-- <text class="body-normal-text"></text> -->
							</view>
						</view>
					</view>
					<!-- </view> -->
					<view class="posts-container" v-if="currentTab===1" @scrolltolower="onScrolltolower">
						<!-- <view style="height: 80vh;"> -->
						<view class="post" v-for="(posting, index) in postings.slice(0, 10+endIndex)" :key="index">
							<div class="main" @click="goDetails(posting.id)">
								<div class="img"> <img :src="posting.pictureUrl1" alt="" mode="aspectFill" /></div>
								<div class="contents">
									<div class="contents-text">
										{{posting.content}}
									</div>
									<div class="shop">
										<div class="img"><img :src="posting.dish.image" alt="" /></div>
										<div class="shop-text">
											<div class="tag-rate">
												<div class="tag"> 菜品</div>
												<uni-rate v-model="posting.dish.stars" @change="onChange" size=5vw
													class="rate" allowHalf active-color="#FF8D1A" readonly />
											</div>
											<div class="shop-name">{{posting.dish.name}}</div>
										</div>
									</div>
								</div>
							</div>

							<div class="poster">
								<div class="poster-img"><img :src="posting.user.avatar" alt="" /></div>

								<div class="post-message">
									<div class="poster-name">{{posting.user.userName}}</div>
									<div class="time">{{posting.createTime}}</div>
								</div>

								<div class="like">
									<div class="like-img">
										<image v-if="!posting.liked" src="../../static/chishenme/like.png" alt=""
											@click="like(posting)" />
										<image v-else="posting.liked" src="../../static/chishenme/afterLike.png" alt=""
											@click="like(posting)" />
										<!-- <image src="../../static/chishenme/like.png" alt="" /> -->

									</div>
									<div class="like-text">{{posting.likes}}</div>
								</div>

								<div class="comment">
									<div class="comment-img">
										<image src="../../static/chishenme/comment.png" alt="" />
									</div>
									<div class="comment-text">{{posting.commentCount}}</div>
								</div>



								<div class="others">
									<div class="others-img">
										<image src="../../static/chishenme/others.png" alt="" />
									</div>
								</div>

							</div>
						</view>
						<view class="empty" v-if="postings.length===0">
							空空如也~
						</view>
						<!-- </view> -->
					</view>
				</swiper-item>
			</swiper>
		</view>
		<div class="edit">
			<!-- 灰色遮罩 -->
			<div class="overlay" v-if="showModal" @click="closeModal"></div>
			<!-- 弹窗内容 -->
			<div class="modal" v-if="showModal">
				<h2 style="text-align: center;">输入菜单名字</h2>
				<textarea v-model="dishListNameText"
					style="background-color: #E5E5E5;width: 100%;margin: 2vh 0;padding: 10px;box-sizing: border-box;"
					@input="handleInput()"></textarea>
				<button @click="dishListNameSubmit()">提交</button>
			</div>
		</div>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				//测试静态数据

				favoriteSrc: '/static/my/grey.png',
				favDishCount: 0,

				avatarId: 0,
				avatarSrc: '',
				/* username: '用户名', */
				collectedCount: 0,
				/* createdCount: 0, */
				//页面效果
				msgType: 'success',
				messageText: '这是一条成功提示',

				showModal: false,

				value: 4.5, //星评
				endIndex: 0,
				swiperTopicListScroll: 'scroll', //暂时无效
				tabs: [{
						id: 1,
						name: '菜单',
						/* count: 0, */
					},
					{
						id: 2,
						name: '发布的评价',
						/* count: 0, */
					},
				],
				currentTab: 0,
				currentFilter: 0,
				swiperDateList: [{
						id: 1,
						/* content: '推荐' */
					},
					{
						id: 2,
						/* content: '交通交通' */
					},
				],

				//后端接口
				dishListNameText: '',

				createdDishLists: [{

					dishListId: '0',
					name: '菜单名',
					dishCount: 0,
					imageSrc: '/static/home/main/back1.png',
				}],
				recentDishLists: [{
					dishListId: '0',
					name: '菜单名',
					dishCount: 0,
					imageSrc: '/static/home/main/back1.png',
				}],
				recentDishListsId: [0, ],

				userInfo: {
					userName: '',
					userImg: '',
					id: '',
					followersCount: 0, //关注的人
					fansCount: 0, //粉丝数
				},

				postings: [{}],
				idImgUrlMap: {},

			};
		},
		onShow() {
			const userInfo = uni.getStorageSync('userInfo');
			/* console.log(userInfo.data); */
			/* this.recentDishListsId = uni.getStorageSync('recentDishLists_${userId}'); */
			this.userInfo.userName = userInfo.data.userName;
			this.userInfo.id = userInfo.data.id;

			this.avatarId = userInfo.data.avatar;
			this.getAvatar(this.avatarId);
			this.getFavDishListImage();
			this.getFollowers();
			this.getFans();
			this.getRecentDishLists();
			this.getCreatedDishLists();
			this.getDishCount(1)
				.then(dishCount => {
					/* console.log('Dish count:', dishCount); */
					this.favDishCount = dishCount;
					// 在这里处理 dishCount，例如更新UI或进行其他操作  
				})
				.catch(error => {
					console.error('An error occurred:', error);
				});;
			this.getMyPostings();
		},
		mounted() {
			window.addEventListener('scroll', this.handleScroll); //无效

		},
		destroyed() {
			window.removeEventListener('scroll', this.handleScroll);
		},
		computed: {
			swiper() {
				return this.$refs.mySwiper.swiper
			}
		},
		methods: {
			//页面效果
			onScrolltolower() {
				this.endIndex += 10;
				/* console.log(5555555555555555) */
			},
			cancelDelete(index) {
				this.createdDishLists[index].toBeDeleted = false;
			},
			showDelete(index) {
				this.createdDishLists[index].toBeDeleted = true;
			},
			popMessage(type, text) {
				this.msgType = type
				this.messageText = text
				this.$refs.message.open()
			},
			openModal() {
				this.showModal = true;
			},
			closeModal() {
				this.showModal = false; // 关闭弹窗
			},
			handleInput() {
				if (this.dishListNameText.length > 15) {
					this.popMessage("error", "菜单名称长度不得超过15");
				}
			},
			handleCollected() {
				this.getCollectedDishLists();
				this.switchFilter(1);
			},
			handleCreated() {
				this.getCreatedDishLists();
				this.switchFilter(2);
			},
			switchFilter(filterId) {
				switch (filterId) {
					case 0:
						this.currentFilter = 0;
						break;
					case 1:
						this.currentFilter = 1;
						break;
					case 2:
						this.currentFilter = 2;
						break;
					default:
						break;
				}
			},
			swichMenu(id) {
				this.currentTab = id
				/* console.log(11, id) */
				/* this.tabCurrent = 'tabNum' + id */
			},
			swiperChange(e) {
				/* console.log(22, e.detail.current) */
				let index = e.detail.current
				this.swichMenu(index)
			},
			handleScroll() {
				const swiperBoxList = document.querySelector('.swiper-box-list');
				const swiperBoxListRect = swiperBoxList.getBoundingClientRect();

				if (swiperBoxListRect.top <= 0) {
					this.swiperTopicListScroll = 'scroll';
				} else {
					this.swiperTopicListScroll = 'scroll';
				}
			},
			//页面跳转
			goDishList(id, name) {
				uni.navigateTo({
					url: '../dishListDetail/dishListDetail?id=' + id + '&name=' + name
				})
			},
			goConfig() {
				uni.navigateTo({
					url: '../config/config'
				})
			},
			goFollow(index) {
				uni.navigateTo({
					url: '../follow/follow?index=' + index
				})
			},
			goDetails(id) {
				uni.navigateTo({
					url: '../postDetail/postDetail?id=' + id + ''
				})

			},
			goBlindBox() {
				uni.navigateTo({
					url: '../blindBox/blindBox?id=2'
				})
			},

			//后端接口
			getAvatar(id11) {
				if (!id11) {
					this.avatarSrc = '/static/chishenme/morentouxiang.jpg';
				} else {
					uni.request({ //获取图片
						url: 'http://localhost:8080/image/getImage?id=' + id11,
						method: 'GET',
						success: res1 => {

							// const arrayBuffer = uni.base64ToArrayBuffer(res1.data.data.data);
							// // 将ArrayBuffer转换为Blob对象
							// const blob = new Blob([arrayBuffer], {
							// 	type: 'image/png'
							// });
							// // 创建Blob URL
							// const imgUrl = URL.createObjectURL(blob);
							const base64Data = res1.data.data.data;
							// 直接设置图片 src 属性
							const imgUrl = `data:image/png;base64,${base64Data}`;

							this.avatarSrc = imgUrl;
							// this.button1img = imgUrl;
						},
						fail: (err) => {
							console.error(err);
							// 在这里处理请求失败的逻辑
						}
					});
				}
			},
			getFavDishListImage() {
				const url = 'http://localhost:8080/preference/getMenuImage/' + this.userInfo.id + '?menuId=' + 1;
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						this.favoriteSrc = (res.data == '无菜单图片') ? '/static/my/grey.png' : res.data;
						/* 						console.log('res');
												console.log(res); */
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			confirmDeleteDishList(id) {
				// 显示确认弹窗
				uni.showModal({
					title: '删除菜单',
					content: '确定要删除这个菜单吗？',
					success: (res) => {
						if (res.confirm) {
							// 用户点击了确定
							this.deleteDishList(id);
						} else if (res.cancel) {
							// 用户点击了取消
							console.log('用户取消了添加');
						}
					},
					fail: (err) => {
						console.error('弹窗显示失败', err);
					}
				});
			},
			deleteDishList(id) {
				const url = 'http://localhost:8080/preference/' + this.userInfo.id + '/deleteMenu?menuId=' + id;
				uni.request({
					url: url,
					method: 'DELETE',
					success: (res) => {
						/* console.log(res); */
						this.getCreatedDishLists();
						this.popMessage("success", "菜单已删除！");
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},

			dishListNameSubmit() {
				if (this.dishListNameText.lengt > 15) {
					return;
				}
				const url = 'http://localhost:8080/preference/' + this.userInfo.id + '/creatMenu?Name=' + this
					.dishListNameText;
				uni.request({
					url: url,
					method: 'POST',
					success: (res) => {
						this.popMessage("success", "菜单创建成功！");
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/my/my' // 当前页面的路径
							});
						}, 1000);
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getFollowers() {
				const url = 'http://localhost:8080/user/' + this.userInfo.id + '/followers';
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						this.userInfo.followersCount = res.data.data.length;
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getFans() {
				const url = 'http://localhost:8080/user/' + this.userInfo.id + '/fans';
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						this.userInfo.fansCount = res.data.data.length;
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getDishCount(id) {
				const url = 'http://localhost:8080/preference/' + this.userInfo.id + '/getMenuDishes?menuId=' + id;

				return new Promise((resolve, reject) => {
					uni.request({
						url: url,
						method: 'GET',
						success: (res) => {

							const dishCount = res.data.data.length - 1;
							if (dishCount < 0) {
								dishCount = 0
							}
							resolve(dishCount); // 使用 resolve 来传递异步操作的结果  
						},
						fail: (err) => {
							console.error(err);
							reject(err); // 使用 reject 来传递异步操作的错误  
						}
					});
				});
			},
			getRecentDishLists() {
				const url = 'http://localhost:8080/preference/' + this.userInfo.id + '/getMenus';
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						/* console.log(res); */
						this.createdDishLists = [];

						let i = 0;
						while (i < this.recentDishListsId.length) {
							let found = false;
							for (var j = 0; j < res.data.data.length; j++) {
								const keys = Object.keys(res.data.data[j]);
								if (recentDishListsId[i] === keys[0]) {
									found = true;
									const dishListId = keys[0]; // 假设每个对象只有一个键
									const name = item[dishListId];
									this.getDishCount(dishListId)
										.then(dishCount => {
											const url2 =
												'http://localhost:8080/preference/getMenuImage/' +
												this
												.userInfo.id + '?menuId=' + dishListId;
											uni.request({
												url: url2,
												method: 'GET',
												success: (res2) => {
													const menuImage = res2.data;
													const newDish = {
														dishListId: dishListId,
														name: name,
														dishCount: dishCount,
														imageSrc: menuImage,
														toBeDeleted: false,
													};
													/* console.log(newDish); */
													this.recentDishLists.push(
														newDish);
												},
												fail: (err) => {
													console.error(err);
													// 在这里处理请求失败的逻辑
												}
											});
										})
										.catch(error => {
											console.error('An error occurred:', error);
										});
									/* console.log(this.recentDishLists); */
									break;
								}
							}
							if (!found) {
								recentDishListsId.splice(i, 1);
								continue;
							}
						}
					},
				})
			},
			getCreatedDishLists() {
				const url = 'http://localhost:8080/preference/' + this.userInfo.id + '/getMenus';
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						/* console.log(res); */
						this.createdDishLists = [];
						// 遍历 res.data.data 数组  
						res.data.data.forEach(item => {
							// 获取对象的键和值  
							const keys = Object.keys(item);
							const dishListId = keys[0]; // 假设每个对象只有一个键  
							const name = item[dishListId];
							this.getDishCount(dishListId)
								.then(dishCount => {
									const url2 =
										'http://localhost:8080/preference/getMenuImage/' +
										this
										.userInfo.id + '?menuId=' + dishListId;
									uni.request({
										url: url2,
										method: 'GET',
										success: (res2) => {
											var menuImage;
											console.log(1111111111);
											console.log(res2.data);
											if (res2.data != "无菜单图片") {
												menuImage = res2.data;
											} else {
												menuImage =
													'/static/chishenme/defaut-dish-list-image.png';
											}
											console.log(2222222222222222);
											console.log(menuImage);
											const newDish = {
												dishListId: dishListId,
												name: name,
												dishCount: dishCount,
												imageSrc: menuImage,
												toBeDeleted: false,
											};
											/* console.log(newDish); */
											this.createdDishLists.push(
												newDish);
										},
										fail: (err) => {
											console.error(err);
											// 在这里处理请求失败的逻辑
										}
									});
								})
								.catch(error => {
									console.error('An error occurred:', error);
								});

						});


					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getCollectedDishLists() {
				/* this.dishLists = []; */
			},
			createDishList() {
				const url = 'http://localhost:8080/preference/' + this.userInfo.id + '/creatMenu?Name=' +
					'NewMenu';
				uni.request({
					url: url,
					method: 'POST',
					success: (res) => {
						/* console.log(res); */
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},

			formatDate(dateString) {
				const date = new Date(dateString);

				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2);
				const day = ("0" + date.getDate()).slice(-2);
				const hours = ("0" + date.getHours()).slice(-2);
				const minutes = ("0" + date.getMinutes()).slice(-2);
				const seconds = ("0" + date.getSeconds()).slice(-2);

				const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

				return formattedDate;
			},

			getMyPostings() {
				const url = 'http://localhost:8080/posting/' + this.userInfo.id + '/getPostingsByUserId';
				uni.request({
					url: url,
					method: 'GET',
					success: (res) => {
						/* console.log(res.data.data); */
						const userInfo = uni.getStorageSync('userInfo');
						this.postings = res.data.data;
						/* console.log(this.postings); */
						this.postings = this.postings.map((item) => {
							if (item.pictureUrl1) {
								this.getImg(item, item.pictureUrl1, 1);
							}
							if (item.user.avatar) {
								this.getImg(item, item.user.avatar, 2);
							}
							if (!item.user.avatar) {
								item.user.avatar = this.defaultAvatar;
							}
							if (!item.pictureUrl1) {
								item.pictureUrl1 = item.dish.image;
							}
							item.createTime = this.formatDate(item.createTime);
							item.likeUser.forEach((item2) => {
								if (item2 === userInfo.data.id) {
									item.liked = true;
								}
							});

							return item;
						});
						/* console.log(this.postings); */
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			getImg(item, id, index) {
				uni.request({ //获取图片
					url: 'http://localhost:8080/image/getImage?id=' + id,
					method: 'GET',
					success: res1 => {
						// console.log("根据文件地址获得的base64编码图片"); 
						// console.log(res1.data.data.data)
						// 将base64字符串转换为ArrayBuffer格式
						// const arrayBuffer = uni.base64ToArrayBuffer(res1.data.data.data);
						// // 将ArrayBuffer转换为Blob对象
						// const blob = new Blob([arrayBuffer], {
						// 	type: 'image/png'
						// });
						// // 创建Blob URL
						// const imgUrl = URL.createObjectURL(blob);
						const base64Data = res1.data.data.data;
						// 直接设置图片 src 属性
						const imgUrl = `data:image/png;base64,${base64Data}`;
						this.idImgUrlMap[id] = imgUrl;
						if (index == 1) {
							item.pictureUrl1 = imgUrl;
						} else if (index == 2) {
							item.user.avatar = imgUrl
						}

						//console.log(this.idImgUrlMap)
						return imgUrl;
					},
					fail: (err) => {
						console.error(err);
						// 在这里处理请求失败的逻辑
					}
				});
			},
			like(item) {

				const userInfo = uni.getStorageSync('userInfo');

				if (item.liked) { //取消点赞
					uni.request({
						url: 'http://localhost:8080/posting/' + item.id + '/deleteLike?userId=' + userInfo.data
							.id,
						method: 'POST',
						data: {},
						success: function(res) {},
						fail: function(err) {
							// 处理失败情况
							console.error(err);
							// 其他操作...
						}
					});
					item.liked = false;
					item.likes--;
				} else {
					uni.request({ //点赞
						url: 'http://localhost:8080/posting/' + item.id + '/like?userId=' + userInfo.data.id,
						method: 'POST',
						data: {},
						success: function(res) {},
						fail: function(err) {
							// 处理失败情况
							console.error(err);
							// 其他操作...
						}
					});
					item.liked = true;
					item.likes++;
				}
			},
		},
	}
</script>

<style lang="scss">
	.my-container {
		height: 100vh;
		width: 100vw;
		background-color: #EA9C60;
		display: flex;
		flex-direction: column;

		.edit-message {
			border-radius: 30px;
			margin: 3vh 3vw 0 3vw;
			overflow: hidden;
		}

		//字体统一定义区
		.header-normal-text {
			font-size: 30rpx;
			color: white;
		}

		.header-medium-text {
			font-size: 37.5rpx;
			color: white;

			font-weight: bold;
		}

		.body-normal-text {
			font-size: 35rpx;
			color: #303133;
		}

		.body-bold-text {
			font-size: 37.5rpx;
			color: #303133;
			font-weight: bold;
		}

		.header {
			display: flex;
			/* height: 15vh; */
			padding-bottom: 1vh;
			width: 100%;

			.avatar {
				border-radius: 20vw;
				margin: 80rpx 17rpx 0rpx 35rpx;
				width: 20vw;
				height: 20vw;
			}

			.user-info {

				flex: 7;
				display: flex;
				flex-direction: column;
				margin-left: 17rpx;
				margin-right: 17rpx;

				.username {
					margin-top: 80rpx;
					margin-bottom: 17rpx;
				}

				.location {
					display: flex;

					margin-bottom: 17rpx;

					.location-icon {
						margin-top: 8rpx;
						width: 1.6vh;
						height: 2vh;

					}

					.header-normal-text {
						margin-left: 17rpx;
						color: #E5E5E5;
					}
				}

				.follower {
					display: flex;
					justify-content: space-between;
					/* 两端分散对齐 */
					width: 100%;
					/* 容器宽度设置为100%以便看到效果 */
					margin-bottom: 35rpx;

					/* 	.header-normal-text {
						flex: 3;
					} */
					.header-normal-text {
						padding: 20rpx;
					}
				}
			}

			.setting {
				margin: 80rpx 35rpx 0rpx 17rpx;
				flex: 2;
				width: 12vw;
				/* justify-content: center; */
				align-items: center;
				display: flex;
				flex-direction: column;

				.gear-icon {
					width: 3vh;
					height: 3.3vh;
				}

				.header-normal-text {
					padding: 10rpx;
				}
			}
		}

		.funtion-bar {
			height: 100rpx;
			/* width: 100%; */
			display: flex;
			flex-direction: row;
			overflow-x: scroll;

			.message {

				padding: 17rpx;
				/* display: inline; */
				align-self: center;
			}

			.preference {
				height: 100%;
				padding: 17rpx;
				/* display: inline; */
				align-self: center;
			}

			.history {
				height: 100%;
				padding: 17rpx;
				/* display: inline; */
				align-self: center;
			}
		}

		.body {
			width: 100vw;
			flex: 1;
			background-color: #FFFFFF;
			border-radius: 35rpx 35rpx 0rpx 0rpx;
			display: flex;
			flex-direction: column;


			.top-menu-view {

				display: flex;
				position: sticky;
				top: 0;
				z-index: 3;
				white-space: nowrap;
				width: 100%;
				background-color: #FFFFFF;
				height: 100rpx;
				line-height: 100rpx;
				border-bottom: 1rpx solid #d8dbe6;
				border-radius: 35rpx 35rpx 0rpx 0rpx;

				.menu-topic-view {

					display: inline-block;
					white-space: nowrap;
					height: 100rpx;
					position: relative;
					margin-left: 35rpx;

					.menu-topic-text {
						font-size: 36rpx;
						color: #303133;
						padding: 25rpx 35rpx;
					}

					// .menu-topic-act {
					// 	margin-left: 30upx;
					// 	margin-right: 10upx;
					// 	position: relative;
					// 	height: 100%;
					// 	display: flex;
					// 	align-items: center;
					// 	justify-content: center;
					// }

					.menu-topic-bottom {
						position: absolute;
						bottom: 0;
						width: 100%;

						.menu-topic-bottom-color {
							width: 50rpx;
							height: 4rpx;
						}
					}

					.menu-topic-act .menu-topic-bottom {

						display: flex;
						justify-content: center;
					}

					.menu-topic-act .menu-topic-bottom-color {
						background: #FF8D1A;
					}

					.menu-topic-act .menu-topic-text {
						color: #FF8D1A;
					}
				}
			}

			.swiper-box-list {
				width: 100%;
				display: flex;
				flex: 1;

				.swiper-topic-list {
					width: 100%;
					// overflow-y: scroll;
					display: flex;
					flex-direction: column;


					/* .swiper-item {
						overflow-y: scroll;
						display: flex;
						flex-direction: column; */
					.dish-list-filter {
						display: flex;
						justify-content: space-between;
						/* 两端分散对齐 */
						width: 80%;
						align-self: center;

						/* 				position: sticky;
				top: 100rpx; */

						.filter-text {
							color: #555555;
							padding: 20rpx;
							font-size: 30rpx;
						}
					}

					.dish-list-container {
						//test
						flex: 1;
						display: flex;
						flex-direction: column;

						.dish-list {
							display: flex;
							position: relative;
							padding-left: 35rpx;
							padding-right: 35rpx;
							padding-top: 17rpx;
							padding-bottom: 17rpx;

							.image-container {
								height: 25vw;
								width: 25vw;
								position: relative;

								.dish-list-image {
									height: 25vw;
									width: 25vw;
									border-radius: 17rpx;
									z-index: 1;
								}

								.favorite-icon {
									height: 9vw;
									width: 10vw;
									z-index: 2;
									position: absolute;
									top: 50%;
									left: 50%;
									transform: translate(-50%, -50%);
								}
							}

							.dish-list-info {
								display: flex;
								flex-direction: column;
								justify-content: center;
								flex: 1;

								.body-bold-text {
									margin: 17rpx 17rpx 5rpx 17rpx;
								}

								.body-normal-text {
									margin: 5rpx 17rpx 17rpx 17rpx;
								}
							}

							.operation {
								margin-left: auto;
								align-self: center;
								z-index: 999;

								.more {
									width: 10rpx;
									height: 50rpx;
									padding: 35rpx;
								}
							}

							.delete {
								position: absolute;
								z-index: 1000;
								right: 20rpx;
								padding: 20rpx;
								top: 25%;
								transform: translateY(-50%);
								box-shadow: 2px 2px 5px 0px rgba(122, 122, 122, 0.7);
								background-color: #E5E5E5;
							}

							.cancel {
								position: absolute;
								z-index: 1000;
								right: 20rpx;
								padding: 20rpx;
								top: 75%;
								transform: translateY(-50%);
								box-shadow: 2px 2px 5px 0px rgba(122, 122, 122, 0.7);
								background-color: #E5E5E5;
							}



							.fav-dish-list-info {
								display: flex;
								flex-direction: column;
								justify-content: center;
								width: 40vw;

								.body-bold-text {
									margin: 17rpx 17rpx 5rpx 17rpx;
								}

								.body-normal-text {
									margin: 5rpx 17rpx 17rpx 17rpx;
								}
							}

							.go-to-blindbox-button {

								font-size: 4vw;
								background-color: #FF8D1A;
								color: #FFFFFF;
								border-radius: 30rpx;
								align-self: center;
								white-space: nowrap;
								padding: 10rpx;
								margin-left: auto;
								z-index: 3;
							}


						}

						.empty {
							padding: 35rpx;
							color: #A6A6A6;
							align-self: center;
						}
					}

					.posts-container {
						width: 100%;
						overflow-y: scroll;
						height: 100vh;
						background-color: #E5E5E5;

						.empty {
							margin: 0 2vw;
							padding: 0.5vh 0;
							font-size: 3vw;
							text-align: center;
							background-color: #F4F4F5;
							color: #646464;
							box-sizing: border-box;
							background-color: transparent;
						}

						.post {
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							margin-top: 10px;

							.main {
								display: flex;
								height: 350rpx;
								width: 710rpx;
								border-radius: 50rpx;
								background: linear-gradient(to bottom, white, #E5E5E5);
								margin: 0rpx 30rpx 10rpx 30rpx;
								box-shadow: -5rpx -5rpx 30rpx 1rpx rgba(0, 0, 0, 0.1);

								.img {
									flex: 9;
									background-color: white;
									margin: 20rpx 0 20rpx 20rpx;
									border-radius: 30rpx;

									img {
										height: 100%;
										width: 100%;
										border-radius: 30rpx;
									}
								}

								.contents {
									flex: 11;
									margin: 20rpx;
									display: flex;
									flex-direction: column;

									.contents-text {
										flex: 1;
										font-size: 30rpx;
										max-height: 14vh;
										overflow: hidden;
										text-overflow: ellipsis;
										display: -webkit-box;
										-webkit-box-orient: vertical;
										-webkit-line-clamp: 5;
										/* 根据需要调整行数 */
									}

									.shop {
										background-color: #E5E5E5;
										border-radius: 20rpx;
										display: flex;
										justify-content: center;
										align-items: center;
										height: 6vh;
										margin-top: auto;

										.img {
											flex: 4;
											height: 95%;
											display: flex;
											justify-content: flex-start;
											align-items: center;
											background-color: transparent;
											margin: 0;
											padding-left: 10rpx;
											border-radius: 10rpx;

											img {
												width: 90%;
												height: 90%;
												border-radius: 15rpx;
											}
										}

										.shop-text {
											flex: 9;
											display: flex;
											flex-direction: column;

											.tag-rate {
												display: flex;

												.tag {
													background-color: #A6A6A6;
													width: 60rpx;
													color: #E3E3E3;
													font-size: 25rpx;
													display: flex;
													justify-content: center;
													align-items: center;
													border-radius: 10rpx;
												}

												.rate {
													margin: 0 1vw;
												}
											}

											.shop-name {
												font-size: 30rpx;
											}
										}
									}
								}
							}

							.poster {
								width: 95%;
								height: 100rpx;
								display: flex;

								.poster-img {
									flex: 1.8;
									background-color: transparent;
									display: flex;

									img {
										width: 11vw;
										height: 11vw;
										border-radius: 50%;
									}
								}

								.post-message {
									flex: 4;
									background-color: transparent;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: flex-start;

									.poster-name {
										height: 55rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										max-width: 220rpx;
										display: inline-block;
										padding-top: 10rpx;

									}

									.time {
										height: 45rpx;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										display: inline-block;
										max-width: 200rpx;
										font-size: 27rpx;
										color: #9C9C9C;
										justify-content: center;
										align-items: center;
									}
								}

								.comment {
									flex: 2;
									display: flex;
									justify-content: center;
									align-items: center;

									.comment-img {
										margin: 0;
										padding: 0;
										margin-left: 10rpx;
										width: 50rpx;
										padding-top: 10rpx;

										image {
											width: 5vw;
											height: 5vw;
										}
									}

									.comment-text {
										flex: 1;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
										max-width: 100rpx;
										display: inline-block;
										justify-content: flex-end;
										align-items: flex-end;

									}
								}

								.like {
									flex: 2;
									display: flex;
									justify-content: center;
									align-items: center;
									padding-right: 10rpx;

									.like-img {
										margin: 0;
										padding: 0;
										margin-left: 10rpx;
										width: 50rpx;
										padding-top: 10rpx;

										image {
											width: 5vw;
											height: 5vw;
										}
									}

									.like-text {
										flex: 1;
										overflow: hidden;
										white-space: nowrap;
										text-overflow: ellipsis;
										max-width: 100rpx;
										display: inline-block;
										justify-content: flex-start;
										align-items: flex-start;
									}
								}

								.others {
									flex: 1;
									display: flex;
									justify-content: center;
									align-items: center;
									padding-left: 10rpx;
									padding-bottom: 10rpx;

									.others-img {
										width: 100%;

										image {
											height: 1vw;
											width: 5vw;
										}
									}
								}
							}
						}

						.title2 {
							margin: 0 2vw;
							padding: 0.5vh 0;
							font-size: 3vw;
							text-align: center;
							background-color: #F4F4F5;
							color: #9C9C9C;
							box-sizing: border-box;
							background-color: transparent;
						}
					}
				}

			}

		}

		.edit {
			.overlay {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0, 0, 0, 0.5);
				/* 半透明黑色背景 */
				z-index: 999;
				/* 确保遮罩层在弹窗上方 */
			}

			.modal {
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0;
				background-color: white;
				padding: 10px;
				z-index: 1000;
				/* 确保弹窗在遮罩层上方 */
				border-radius: 30px 30px 0 0;
			}
		}
	}
</style>